An Example of What You'll Build

Below, you'll see an example of a web page similar to what you'll make and submit for this section. You might notice that this page looks a lot nicer than the one from the previous stage. That's because we'll learn in this lesson how to add style to our pages using something called CSS. At the end of this section, you'll submit a web page that has style. Instead of creating a web page about notes again, you are welcome to get creative and make your web page on any topic you'd like. In our examples, we'll keep showing notes for the topic, but when it's time for you to create your project, the sky is the limit!

The screenshot above depicts a split window in Atom — with the HTML open in the left pane, the CSS in the middle pane, and the web page preview in the right pane.

Note: If you want to set up your Atom workspace like this, refer back to instructions in the "Learn to Code" welcome section to install the atom-html-preview package and split your Atom window into panes. Otherwise, you can open your HTML file in a browser as usual.

Moving Forward

Think about how the resulting web page shown here differs from that in the previous stage. Though you may not understand the details of this code yet, you soon will as you move forward in Stage 1!

Lastly, it’s important to note that the example above is given so that you can learn from it and draw inspiration for your own project at the end of this stage. Take care that you do not copy this code — rather, create your own! If you're not sure why this matters, please see the Udacity's Honor Code.